import React, {Component} from 'react';
// import axios from "axios";
import PubSub from 'pubsub-js'

class Search extends Component {
    search =async () => {
        const {inputElement: {value: keyWords}} = this
        PubSub.publish('updateAppState',{isFirst: false, isLoading: true})
        // axios.get(`/api1/search/users?q=${keyWords}`).then((res) => {
        //     console.log(res.data)
        //     PubSub.publish('updateAppState',{users: res.data.items, isLoading: false})
        // }, err => {
        //     PubSub.publish('updateAppState',{isLoading: false, err: err.message})
        // })
        try {
            const response=await fetch(`/api1/search/users?q=${keyWords}`)
            const data=await response.json()
            PubSub.publish('updateAppState',{users: data.items, isLoading: false})
        }catch (e) {
            console.log('请求出错',e)
        }
    }

    render() {
        return (
            <section className="jumbotron">
                <h3 className="jumbotron-heading">Search Github Users</h3>
                <div>
                    <input ref={(c) => {
                        this.inputElement = c
                    }} type="text" placeholder="enter the name you search"/>&nbsp;
                    <button onClick={this.search}>Search</button>
                </div>
            </section>
        );
    }
}

export default Search;